<template>
  <div class="full-height bg-white page-content content relative-position">
    <div class="row flex" style="padding:10px" v-show="!url">
      <!-- <div class="col-lg-3 col-md-4 col-xs-6 margin-b-20">
      </div>-->
      <!-- <iframe  src="http://111.230.101.24:7010/webroot/decision/view/report?viewlet=%25E4%25BA%25BA%25E5%2591%2598%25E7%25BB%25A9%25E6%2595%2588.cpt" height="550px" width="100%" name="demo" frameborder="0" scrolling="auto"></iframe> -->
      <div
        class="card-item col-lg-card col-md-4 col-sm-6"
        v-for="(item, index) in customList"
        :key="index"
        @click="goLink(item)"
      >
        <div class="card">
          <div class="mark"></div>
          <span>{{item.reportingName}}</span>
        </div>
      </div>
    </div>
    <div class="detail" v-show="url">
      <div class="back">
        <q-btn
          class="btn"
          style="width: 96px"
          unelevated
          color="primary"
          label="返回"
          @click="url = ''"
        />
      </div>
      <iframe :src="url" style="flex:1" width="100%" name="demo" frameborder="0" scrolling="auto"></iframe>
    </div>
  </div>
</template>
<script>
import { getReportingCompanyList } from '../../boot/statistics/product-stat'
import { loadToken, translateToken } from 'yz-help'

export default {
  name: 'custom-report',
  data () {
    return {
      token: '',
      url: '',
      customList: [] // 自定义列表
    }
  },
  methods: {
    goLink (item) {
      console.log(item)
      const userInfo = translateToken(loadToken())
      // let url = item.reportingUrl
      this.url = item.reportingUrl + `&tenantId=${this.token}&tenantId01=${userInfo.tenant_id}`
    },
    async getReportingCompanyList () {
      let res = await getReportingCompanyList()
      if (res.code === '1200') {
        this.customList = res.data
      }
      console.log(res)
    }
  },
  mounted () {
    this.getReportingCompanyList()
    this.token = loadToken()
  }
}
</script>
<style lang="stylus" scoped>
@media (min-width: 1440px) {
  .row > .col-lg-card {
    height: auto;
    width: 25%;
  }
}

ul {
  display: flex;
}

li {
  width: 100%;
  height: 100%;
  opacity: 0.3;
  border-radius: 3px;
  margin-left: 10px;
  margin-top: 10px;
  justify-content: center;
}

.back {
  height: 50px;
  line-height: 50px;
}

.detail {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-item {
  padding: 10px;

  .card {
    cursor: pointer;
    background-image: url('../../statics/img/customReportbg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // background-color: rgba(0, 0, 0, 0.3);
    // padding: 10px;
    height: 185px;
    // box-shadow: 0px 0px 7px 0px rgba(22, 22, 22, 0.2);
    border-radius: 6px;
    font-size: 8px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    position: relative;

    .mark {
      border-radius: 6px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.3);
    }

    span {
      position: absolute;
      z-index: 3;
      display: inline-block;
      top: 20px;
      left: 20px;
    }
  }
}
</style>
